import React, { Component, Fragment } from 'react';
import {
  Steps,
  Row,
  Col,
  Form,
  Input,
  Select,
  Divider,
  Icon,
  Card,
  Button,
  Radio,
  Checkbox,
  Switch,
  message,
  TreeSelect,
  Cascader,
  InputNumber,
  Table,
  Popover,
} from 'antd';
import SKU from '@/components/plugins/sku/index';
import styles from './index.less';
import { connect } from 'dva';
import SelectedImage from '@/components/plugins/selectImage/index';
import Videoplugin from '@/components/plugins/videoplugin/videoplugin';
import { Sortable } from 'zent';
import InputPrices from '@/components/plugins/InputPrices';
import InputText from '@/components/Input/index';
import router from 'umi/router';
import AddMessage from './AddMessage';
import AddDetail from './addDetail';
import priceImg from '@/assets/price.png';
import SelectWidthAction from '@/components/SelectWidthAction/index';

const day = [],
  hours = [],
  minutes = [];
for (let i = 0; i <= 7; i++) {
  day.push(<Select.Option key={i} value={i}>{`0${i}`}</Select.Option>);
}
for (let i = 0; i <= 23; i++) {
  if (i < 10) {
    hours.push(
      <Select.Option key={i} value={i}>
        {'0' + i}
      </Select.Option>
    );
  } else {
    hours.push(
      <Select.Option key={i} value={i}>
        {i}
      </Select.Option>
    );
  }
}
for (let i = 0; i <= 59; i++) {
  if (i < 10) {
    minutes.push(<Select.Option key={i}>{'0' + i}</Select.Option>);
  } else {
    minutes.push(<Select.Option key={i}>{i}</Select.Option>);
  }
}

let globalLever = 1;
@connect(({ global, goods, expresssetting }) => ({
  oemInfo: global.oemInfo,
  goods,
  supportDelivery: expresssetting.supportDelivery,
  freightTemplateList: expresssetting.freightTemplateList,
}))
class ReleaseGoods extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: [],
      current: 0,
      btnLoading: false,
      name: '',
      sharedesc: '',
      groups: [],
      class_1: null,
      class_2: null,
      tagId: null,
      feature: '',
      vedio: '',
      videoUrl: '',
      deductionType: 1,
      join_member_discount: false,
      shelfTime: 1,
      freight: null,
      freightTemplateId: null,
      freightWay: 1,
      stockUpTime: false,
      isSwitch: false,
      courier: false,
      distribution: false,
      sinceTheLift: false,
      delivery: [],
      goods_no: '',
      treeData: [],
      tagList: [],
      options: [],
      price: null,
      total_stock: null,
      origin_price: null,
      cost_price: null,
      list: [],
      freightTemplate: [],
      day: '',
      hours: '',
      minutes: '',
      skuTree: [],
      sku: [],
      message: [],
      msgName: '',
      msgType: '',
      required: false,
      multipleLines: false,
      hasDate: false,
      formItem: [],
      templateId: 0,
      details: '',

      skuListArr: [],
      sku_name_1: {},
      sku_name_2: {},
      sku_name_3: {},
      sku_name_1_value: [],
      sku_name_2_value: [],
      sku_name_3_value: [],
      stock: [],
      columns: [],
      priceDisabled: false,
      allStockNumDisabled: false,
      imgListLength: 0,
      modifyPrice: false,
      modifyInventory: false,
      bulkChanges: true,
      allPrice: null,
      allStockNum: null,
      videoImgShow: false,
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.courierArr = [];
  }

  componentDidMount() {
    this.GetFirstAndSecondList();
    this.GetProductCategoryList();
    this.GetTagList();
    this.GetSupportDelivery();
    this.GetFreightTemplateList();
    window.Isoption = true;
  }

  componentWillMount() {
    window.Isoption = false;
  }

  // 添加图片
  handleAdd = () => {
    this.OpenImageModal();
  };
  // 删除图片
  handleRemove = removeIndex => {
    const { list } = this.state;
    const newList = list.filter((item, index) => index !== removeIndex);
    this.setState({
      list: newList,
    });
  };
  // 拖拽图片
  handleSortableChange = items => {
    this.setState({
      list: items,
    });
  };

  //获取支持的配送方式
  GetSupportDelivery = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'expresssetting/GetSupportDelivery',
    });
  };

  //获取运费模板
  GetFreightTemplateList = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'expresssetting/GetFreightTemplateList',
      callback: {
        success: data => {
          const { form } = this.props;
          if (data.Data) {
            let arr = data.Data.filter(v => v.IsDefault);
            if (arr.length) {
              this.setState({
                freightTemplateId: arr[0].Id,
              });
              form.setFieldsValue({
                freightTemplateId: arr[0].Id,
              });
            }
          }
        },
      },
    });
  };

  // 获取商品分类
  GetFirstAndSecondList = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'goods/GetFirstAndSecondList',
      callBack: {
        success: res => {
          let arr = [],
            obj = {};
          if (res.Data != null) {
            res.Data.map(item => {
              obj = {};
              obj.title = item.Name;
              obj.value = '0-' + item.Id;
              obj.key = '0-' + item.Id;
              obj.disabled = true;
              if (item.SecondList != null) {
                obj.children =
                  item.SecondList.length > 0 &&
                  item.SecondList.map(o => {
                    return {
                      title: o.Name,
                      value: '0-0-' + o.Id,
                      key: '0-0-' + o.Id,
                    };
                  });
              }
              arr.push(obj);
            });
            this.setState({
              treeData: arr,
            });
          }
        },
        error: res => {
          message.error(res.Msg);
        },
      },
    });
  };
  // 获取商品类目(顶级)
  GetProductCategoryList = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'goods/GetProductCategoryList',
      callBack: {
        success: res => {
          let arr = [],
            obj = {};
          if (res.Data != null) {
            res.Data.map((item, index) => {
              if (item.HasChilds) {
                obj = {};
                obj.value = item.Id;
                obj.label = item.Value;
                obj.isLeaf = false;
                arr.push(obj);
              }
            });
            this.setState({
              options: arr,
            });
          }
        },
        error: res => {
          message.error(res.Msg);
        },
      },
    });
  };
  // 获取商品标签
  GetTagList = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'goods/GetTagList',
      callBack: {
        success: res => {
          if (res.Data != null) {
            this.setState({
              tagList: res.Data,
            });
          }
        },
        error: res => {
          message.error(res.Msg);
        },
      },
    });
  };

  // 下一步
  next = () => {
    this.props.form.validateFieldsAndScroll({ force: true }, (err, values) => {
      if (!err) {
        const current = this.state.current + 1;
        this.setState({
          current,
          formItem: this.addMsg.state.formItem,
        });
      }
    });
  };
  // 上一步
  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
    this.addMsg.setState(
      {
        formItem: this.state.formItem,
      },
      () => {
        this.forceUpdate();
      }
    );
  }

  // 保存
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll({ force: true }, (err, values) => {
      if (!err) {
        this.setState({ btnLoading: true });
        // 提交数据
        const { dispatch } = this.props;
        dispatch({
          type: 'goods/CreateProduct',
          payload: {
            name: this.state.name, //商品名称
            sharedesc: this.state.sharedesc, //分享描述
            groups: this.state.groups, //商品分类
            class_1: this.state.class_1, //商品一级类目
            class_2: this.state.class_2, //商品二级类目
            tagId: this.state.tagId, //商品标签
            feature: this.state.feature, //商品卖点
            picture: this.state.list, //商品图片
            vedio: this.state.vedio, //视频地址
            price: this.state.price, //价格
            origin_price: this.state.origin_price, //划线价
            total_stock: this.state.total_stock, //库存
            deductionType: this.state.deductionType, //库存扣减
            goods_no: this.state.goods_no, //商品编码
            cost_price: this.state.cost_price, //成本价
            join_member_discount: this.state.join_member_discount, //会员折扣
            delivery: this.state.delivery, //发货方式
            //stockTime: null,                      //预留配送时间
            freight: this.state.freightWay == 2 ? null : this.state.freight, //统一运费
            freightTemplateId: this.state.freightWay == 1 ? null : this.state.freightTemplateId, //运费模板Id
            status: this.state.shelfTime, //上架时间
            stockTimeForDay: this.state.day, //预留配送时间: 天
            stockTimeForHour: this.state.hours, //预留配送时间：时
            stockTimeForMinute: this.state.minutes, //预留配送时间：分
            messages: this.addMsg.state.formItem,
            templateId: this.state.templateId,
            details: this.state.details,
            sku_name_1: this.state.sku_name_1,
            sku_name_2: this.state.sku_name_2,
            sku_name_3: this.state.sku_name_3,
            sku_name_1_value: this.state.sku_name_1_value,
            sku_name_2_value: this.state.sku_name_2_value,
            sku_name_3_value: this.state.sku_name_3_value,
            stock: this.state.stock,
            freightWay: this.state.freightWay,
          },
          callBack: {
            success: res => {
              this.setState({ btnLoading: false });
              message.success('商品发布成功');
              router.replace({
                pathname: `/${window.storeId}/goods/onsale`,
              });
            },
            error: res => {
              this.setState({ btnLoading: false });
              message.error(res.Msg);
            },
          },
        });
      } else {
        this.setState({ btnLoading: false });
      }
    });
  };

  // 清空规格表数据
  clearData = _stockList => {
    _stockList.forEach(item => {
      let pid =
        item.v1_id +
        '-' +
        (item.v2_id == undefined ? 0 : item.v2_id) +
        '-' +
        (item.v3_id == undefined ? 0 : item.v3_id);
      this.props.form.setFieldsValue({
        ['price' + (() => pid)()]: null,
        ['stock_num' + (() => pid)()]: null,
        ['code' + (() => pid)()]: null,
        ['cost_price' + (() => pid)()]: null,
      });
    });
    this.setState(
      {
        price: 0,
      },
      () => {
        this.props.form.setFieldsValue({
          total_stock: 0,
        });
      }
    );
  };

  deleteItemSkuValue = (_leaf1, _leaf2, _leaf3, _stockList) => {
    let arr = [];
    if (_leaf1 != null) {
      var _idx = 0;
      var _ids = _leaf1.map(function(v) {
        return v.id;
      });

      _stockList.map((element, index) => {
        if (_ids.indexOf(element.v1_id) == -1) {
          arr.splice(0, 0, index);
        }
        _idx++;
      });
    }
    if (_leaf2 != null) {
      var _idx = 0;
      var _ids = _leaf2.map(function(v) {
        return v.id;
      });
      _stockList.map((element, index) => {
        if (_ids.indexOf(element.v2_id) == -1) {
          arr.splice(0, 0, index);
        }
        _idx++;
      });
    }
    if (_leaf3 != null) {
      var _idx = 0;
      var _ids = _leaf3.map(function(v) {
        return v.id;
      });
      _stockList.map((element, index) => {
        if (_ids.indexOf(element.v3_id) == -1) {
          arr.splice(0, 0, index);
        }
        _idx++;
      });
    }
    //删除
    arr.map((item, i) => {
      _stockList.splice(item, 1);
    });
    return _stockList;
  };

  // 获取规格值
  getSKU = data => {
    let dataArr1 = data.filter(item => item.leaf.length > 0);

    let dataArr = data.filter(item => item.leaf.length > 0);
    let lever = dataArr.length;

    let arr = [],
      obj = {},
      stockList = [],
      stockObj = {},
      columns = [];
    if (globalLever == lever && this.state.stock.length > 0) {
      stockList = this.state.stock;
      stockList = this.deleteItemSkuValue(
        lever >= 1 ? data[0].leaf : null,
        lever >= 2 ? data[1].leaf : null,
        lever == 3 ? data[2].leaf : null,
        stockList
      );

      globalLever = lever;
    } else {
      globalLever = lever;
      this.clearData(this.state.stock);
    }

    if (lever > 0) {
      let iii = 0;
      if (lever === 3) {
        dataArr[0].leaf.map((item, index) => {
          dataArr[1].leaf.map((item1, index1) => {
            dataArr[2].leaf.map((item2, index2) => {
              stockObj = {};
              stockObj.id = iii;
              stockObj.key = iii;
              stockObj.v1 = item.text;
              stockObj.v2 = item1.text;
              stockObj.v3 = item2.text;
              stockObj.v1_id = item.id;
              stockObj.v2_id = item1.id;
              stockObj.v3_id = item2.id;
              stockObj.k1_id = dataArr[0].id;
              stockObj.k2_id = dataArr[1].id;
              stockObj.k3_id = dataArr[2].id;
              stockObj.k1 = dataArr[0].text;
              stockObj.k2 = dataArr[1].text;
              stockObj.k3 = dataArr[2].text;
              stockObj.row_1_num = dataArr[1].leaf.length * dataArr[2].leaf.length;
              stockObj.row_2_num = dataArr[2].leaf.length;
              stockObj.row_3_num = 1;
              // stockObj.sale_num = 0;
              var _item = stockList.filter(item => {
                return (
                  item.v1_id == stockObj.v1_id &&
                  item.v2_id == stockObj.v2_id &&
                  item.v3_id == stockObj.v3_id
                );
              });
              if (_item.length == 0) {
                stockList.splice(iii, 0, stockObj);
              } else {
                _item[0].id = iii;
                _item[0].key = iii;
                _item[0].v1 = stockObj.v1;
                _item[0].v2 = stockObj.v2;
                _item[0].v3 = stockObj.v3;
                _item[0].v1_id = stockObj.v1_id;
                _item[0].v2_id = stockObj.v2_id;
                _item[0].v3_id = stockObj.v3_id;
                _item[0].k1_id = stockObj.k1_id;
                _item[0].k2_id = stockObj.k2_id;
                _item[0].k3_id = stockObj.k3_id;
                _item[0].k1 = stockObj.k1;
                _item[0].k2 = stockObj.k2;
                _item[0].k3 = stockObj.k3;
                _item[0].row_1_num = stockObj.row_1_num;
                _item[0].row_2_num = stockObj.row_2_num;
                _item[0].row_3_num = 1;
              }
              iii++;
            });
          });
        });
      } else if (lever === 2) {
        dataArr[0].leaf.map((item, index) => {
          dataArr[1].leaf.map((item1, index1) => {
            stockObj = {};
            stockObj.id = iii;
            stockObj.key = iii;
            stockObj.v1 = item.text;
            stockObj.v2 = item1.text;
            stockObj.v1_id = item.id;
            stockObj.v2_id = item1.id;
            stockObj.k1_id = dataArr[0].id;
            stockObj.k2_id = dataArr[1].id;
            stockObj.k1 = dataArr[0].text;
            stockObj.k2 = dataArr[1].text;
            stockObj.row_1_num = dataArr[1].leaf.length;
            stockObj.row_2_num = 1;
            // stockObj.sale_num = 0;
            let _item = stockList.filter(item => {
              return item.v1_id == stockObj.v1_id && item.v2_id == stockObj.v2_id;
            });
            if (_item.length == 0) {
              stockList.splice(iii, 0, stockObj);
            } else {
              _item[0].id = iii;
              _item[0].key = iii;
              _item[0].v1 = stockObj.v1;
              _item[0].v2 = stockObj.v2;
              _item[0].v1_id = stockObj.v1_id;
              _item[0].v2_id = stockObj.v2_id;
              _item[0].k1_id = stockObj.k1_id;
              _item[0].k2_id = stockObj.k2_id;
              _item[0].k1 = stockObj.k1;
              _item[0].k2 = stockObj.k2;
              _item[0].row_1_num = stockObj.row_1_num;
              _item[0].row_2_num = stockObj.row_2_num;
            }
            iii++;
          });
        });
      } else {
        dataArr[0].leaf.map((item, index) => {
          stockObj = {};
          stockObj.id = iii;
          stockObj.key = iii;
          stockObj.v1 = item.text;
          stockObj.v1_id = item.id;
          stockObj.k1_id = dataArr[0].id;
          stockObj.k1 = dataArr[0].text;
          stockObj.row_1_num = 1;
          // stockObj.sale_num = 0;

          var _item = stockList.filter(item => {
            return item.v1_id == stockObj.v1_id;
          });
          if (_item.length == 0) {
            stockList.splice(iii, 0, stockObj);
          } else {
            _item[0].id = iii;
            _item[0].key = iii;
          }
          iii++;
        });
      }

      dataArr1.map((item, index) => {
        if (item.id && item.leaf.length > 0) {
          if (index === 0) {
            this.setState({
              sku_name_1: item,
              sku_name_1_value: item.leaf,
            });

            obj = {};
            obj.key = item.id;
            obj.id = item.id;
            obj.value = item.value;
            obj.title = item.text;
            obj.dataIndex = 'v1';
            obj.render = (text, row, index) => {
              const obj = {
                children: text,
                props: {},
              };

              if (index === 0 || index % row.row_1_num === 0) {
                obj.props.rowSpan = row.row_1_num;
              } else {
                obj.props.rowSpan = 0;
              }

              return obj;
            };
            arr.push(obj);
          }
          if (index === 1) {
            this.setState({
              sku_name_2: item,
              sku_name_2_value: item.leaf,
            });

            obj = {};
            obj.key = item.id;
            obj.id = item.id;
            obj.value = item.value;
            obj.title = item.text;
            obj.dataIndex = 'v2';
            obj.render = (text, row, index) => {
              const obj = {
                children: text,
                props: {},
              };

              if (index === 0 || index % row.row_2_num === 0) {
                obj.props.rowSpan = row.row_2_num;
              } else {
                obj.props.rowSpan = 0;
              }

              return obj;
            };
            arr.push(obj);
          }
          if (index === 2) {
            this.setState({
              sku_name_3: item,
              sku_name_3_value: item.leaf,
            });

            obj = {};
            obj.key = item.id;
            obj.id = item.id;
            obj.value = item.value;
            obj.title = item.text;
            obj.dataIndex = 'v3';

            arr.push(obj);
          }
        }
      });

      let titleList = [
        {
          key: 'price',
          title: (
            <span>
              <span style={{ color: '#f5222d' }}>*</span>
              价格（元）
            </span>
          ),
          //dataIndex: 'price',
          render: (record, row, index) => {
            let pid =
              record.v1_id +
              '-' +
              (record.v2_id == undefined ? 0 : record.v2_id) +
              '-' +
              (record.v3_id == undefined ? 0 : record.v3_id);
            return (
              <Form.Item style={{ marginBottom: 0 }}>
                {this.props.form.getFieldDecorator('price' + pid, {
                  initialValue: record.price,
                  rules: [
                    {
                      required: true,
                      message: `请输入价格`,
                    },
                    {
                      pattern: /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
                      message: '请正确输入',
                    },
                  ],
                })(
                  <InputNumber
                    min={0.01}
                    max={9999999}
                    name="priceInput"
                    onBlur={() => {
                      this.checkBlur('price' + pid);
                    }}
                    onChange={this.changePrice.bind(this, record)}
                  />
                )}
              </Form.Item>
            );
          },
          width: '13%',
        },
        {
          key: 'stock_num',
          title: (
            <span>
              <span style={{ color: '#f5222d' }}>*</span>
              库存
            </span>
          ),
          // dataIndex: 'stock_num',
          render: (record, row, index) => {
            let pid =
              record.v1_id +
              '-' +
              (record.v2_id == undefined ? 0 : record.v2_id) +
              '-' +
              (record.v3_id == undefined ? 0 : record.v3_id);
            return (
              <Form.Item style={{ marginBottom: 0 }}>
                {this.props.form.getFieldDecorator('stock_num' + pid, {
                  initialValue: record.stock_num,
                  rules: [
                    {
                      required: true,
                      message: `请输入库存`,
                    },
                    {
                      pattern: /^[0-9]\d*$/,
                      message: '请正确输入',
                    },
                  ],
                })(
                  <InputNumber
                    min={0}
                    max={10000000}
                    onBlur={() => {
                      this.checkBlur('stock_num' + pid);
                    }}
                    onChange={this.changeStockNum.bind(this, record)}
                  />
                )}
              </Form.Item>
            );
          },
          width: '13%',
        },
        {
          key: 'code',
          title: '规格编码',
          // dataIndex: 'code',
          render: (record, row, index) => {
            let pid =
              record.v1_id +
              '-' +
              (record.v2_id == undefined ? 0 : record.v2_id) +
              '-' +
              (record.v3_id == undefined ? 0 : record.v3_id);
            return (
              <Form.Item style={{ marginBottom: 0 }}>
                {this.props.form.getFieldDecorator('code' + pid, {
                  initialValue: record.code,
                  rules: [
                    {
                      pattern: /^[A-Za-z0-9]+$/,
                      message: '请正确输入',
                    },
                  ],
                })(<Input onChange={this.changeCode.bind(this, record)} />)}
              </Form.Item>
            );
          },
          width: '13%',
        },

        {
          key: 'cost_price',
          title: '成本价',
          // dataIndex: 'cost_price',
          render: (record, row, index) => {
            let pid =
              record.v1_id +
              '-' +
              (record.v2_id == undefined ? 0 : record.v2_id) +
              '-' +
              (record.v3_id == undefined ? 0 : record.v3_id);
            return (
              <Form.Item style={{ marginBottom: 0 }}>
                {this.props.form.getFieldDecorator('cost_price' + pid, {
                  initialValue: record.cost_price,
                  rules: [
                    {
                      pattern: /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
                      message: '请正确输入',
                    },
                  ],
                })(
                  <InputNumber
                    min={0}
                    max={9999999}
                    onChange={this.changeCostPrice.bind(this, record)}
                  />
                )}
              </Form.Item>
            );
          },
          width: '13%',
        },
      ];

      // {
      //   key: 'sale_num',
      //   title: '销量',
      //   dataIndex: 'sale_num',
      //   width: '10%',
      // }

      if (arr.length > 0) {
        columns = arr.concat(titleList);
        this.setState(
          {
            // stockArray: stockList,
            skuListArr: data,
            columns,
            stock: stockList,
          },
          () => {
            this.sortSprice();
            this.sortStockNum();
          }
        );
      }
    } else {
      this.setState({
        skuListArr: data,
        columns: [],
        stock: [],
      });
    }
  };
  // 规格表价格修改
  changePrice = (obj, value) => {
    this.state.stock.map(item => {
      if (item.id === obj.id) item.price = value;
    });
    this.sortSprice();
  };
  // 价格排序
  sortSprice = () => {
    let minPrice = Math.min.apply(
      Math,
      this.state.stock.map(o => {
        return o.price;
      })
    );
    if (!isNaN(minPrice)) {
      this.setState(
        {
          price: minPrice,
        },
        () => {
          this.props.form.setFieldsValue({
            price: minPrice,
          });
          this.setState({
            priceDisabled: true,
          });
        }
      );
    }
  };

  // 规格表库存修改
  changeStockNum = (obj, value) => {
    this.state.stock.map(item => {
      if (item.id === obj.id) item.stock_num = value;
    });
    this.sortStockNum();
  };
  // 库存计算
  sortStockNum = () => {
    let allStockNum = 0;
    this.state.stock.map(item => {
      allStockNum += item.stock_num;
    });
    if (!isNaN(allStockNum)) {
      this.setState(
        {
          total_stock: allStockNum,
        },
        () => {
          this.props.form.setFieldsValue({
            total_stock: allStockNum,
          });
          this.setState({
            allStockNumDisabled: true,
          });
        }
      );
    }
  };
  // 规格表编码修改
  changeCode = (obj, value) => {
    this.state.stock.map(item => {
      if (item.id === obj.id) item.code = value.target.value;
    });
  };
  // 规格表成本价修改
  changeCostPrice = (obj, value) => {
    this.state.stock.map(item => {
      if (item.id === obj.id) item.cost_price = value;
    });
  };

  // 规格组件数据
  fetchSKUTree = () => {
    return new Promise(resolve => {
      // 获取商品规格列表
      const { dispatch } = this.props;
      dispatch({
        type: 'goods/GetProductSkuList',
        callBack: {
          success: res => {
            if (res.Data != null) {
              let arr = [];
              res.Data.map(item => {
                arr.push({
                  id: item.Id,
                  text: item.Name,
                });
              });
              this.setState(
                {
                  skuTree: arr,
                },
                () => {
                  resolve(this.state.skuTree);
                }
              );
            }
          },
          error: res => {
            message.error(res.Msg);
          },
        },
      });
    });
  };
  fetchSKU = () => {
    return new Promise(resolve => {
      // 获取商品规格列表
      const { dispatch } = this.props;
      dispatch({
        type: 'goods/GetProductSkuValueList',
        payload: {
          id: 1,
        },
        callBack: {
          success: res => {
            if (res.Data != null) {
              let arr = [];
              res.Data.map(item => {
                arr.push({
                  id: item.Id,
                  text: item.Name,
                });
              });
              this.setState(
                {
                  sku: arr,
                },
                () => {
                  resolve(this.state.sku);
                }
              );
            }
          },
          error: res => {
            message.error(res.Msg);
          },
        },
      });
    });
  };

  // 图片插件
  imgModal = ref => {
    this.imgmodal = ref;
  };
  OpenImageModal = () => {
    this.imgmodal.handleShowModal();
  };
  onImageChange = res => {
    const { list } = this.state;
    if (res.length && res.length <= 15 - this.state.list.length) {
      this.setState(
        {
          list: [...list, ...res],
        },
        () => {
          this.props.form.setFieldsValue({
            list: [...list, ...res],
          });
        }
      );
    } else {
      message.error('最多上传15张');
    }
    this.imgmodal.handleModalVisible();
  };
  // 视频插件
  OpenVideoModal = () => {
    this.setState(
      {
        isLoading: true,
      },
      () => {
        this.videomodal.showModal();
      }
    );
  };
  videoModal = ref => {
    this.videomodal = ref;
  };
  onChangeLoading = () => {
    this.setState({
      isLoading: false,
    });
  };
  onVideoChange = item => {
    let videoUrl = item.Img ? item.Img : item.Path.split('.')[0] + 'shot.jpg';
    this.setState(
      {
        vedio: item.Path,
        videoUrl,
      },
      () => {
        this.videomodal.handleCancel();
      }
    );
  };
  // 可勾选多选的树选择
  onChange = value => {
    let arr = [];
    value.map(item => {
      let id = item.split('0-0-')[1] || 0;
      if (id != 0) {
        arr.push(id);
      }
    });
    this.setState({ value, groups: arr });
  };
  // 级联
  onCascaderChange = (value, selectedOptions) => {
    if (value.length === 1) {
      this.setState({
        class_1: value[0],
      });
    }
    if (value.length === 2) {
      this.setState({
        class_1: value[0],
        class_2: value[1],
      });
    }
  };
  // 获取二级级联
  loadData = selectedOptions => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;

    const { dispatch } = this.props;
    dispatch({
      type: 'goods/GetProductCategoryListByPid',
      payload: {
        id: selectedOptions[0].value,
      },
      callBack: {
        success: res => {
          if (res.Data != null) {
            let arr = [],
              obj = {};
            res.Data.map(item => {
              obj = {};
              obj.label = item.Value;
              obj.value = item.Id;
              arr.push(obj);
            });
            targetOption.loading = false;
            targetOption.children = arr;

            this.setState({
              options: [...this.state.options],
            });
          } else {
            targetOption.loading = false;
            this.setState({
              options: [...this.state.options],
            });
          }
        },
        error: res => {
          message.error(res.Msg);
        },
      },
    });
  };
  // 修改商品标签
  onTagChange = value => {
    this.setState({
      tagId: value,
    });
  };
  // 修改库存扣减
  onDeductionTypeChange = e => {
    this.setState({
      deductionType: e.target.value,
    });
  };
  // 修改价格
  onPriceChange = value => {
    this.setState({
      price: value,
    });
  };
  // 修改库存数
  onNumChange = value => {
    this.setState({
      total_stock: value,
    });
  };
  // 修改划线价
  onOriginPrice = value => {
    this.setState({
      origin_price: value,
    });
  };
  // 修改成本价
  costPrice = value => {
    this.setState({
      cost_price: value,
    });
  };
  // 修改统一运费
  onFreight = value => {
    this.setState({
      freight: value,
    });
  };
  // onChange事件共用
  handleChange = event => {
    let target = event.target;

    if (target.type == 'checkbox') {
      this.setState({ [target.name]: target.checked });
    } else {
      this.setState({ [target.name]: target.value });
    }
  };
  // 修改商品名称
  onTextChange = v => {
    this.setState({ name: v.target.value });
    this.props.form.setFieldsValue({
      name: v.target.value,
    });
  };
  // 校验商品名
  checkName = e => {
    this.props.form.validateFields(['name'], { force: true });
  };
  // 校验规格表价格/库存
  checkBlur = id => {
    this.props.form.validateFields([id], { force: true });
  };
  // 修改描述
  onDescChange = v => {
    this.setState({ sharedesc: v.target.value });
    this.props.form.setFieldsValue({
      sharedesc: v.target.value,
    });
  };
  // 修改商品卖点
  onFeatureChange = v => {
    this.setState({ feature: v.target.value });
    this.props.form.setFieldsValue({
      feature: v.target.value,
    });
  };
  // 修改会员折扣
  handleDiscountChange = e => {
    this.setState({
      join_member_discount: e.target.checked,
    });
  };
  // 备货时间开启
  switchChange = value => {
    this.setState({
      isSwitch: value,
    });
    if (value == false) {
      this.setState({
        day: '',
        hours: '',
        minutes: '',
      });
    }
  };
  // 删除主图视频
  removeVideo = e => {
    e.stopPropagation();

    this.setState(
      {
        videoUrl: '',
        vedio: '',
      },
      () => {
        message.success('删除成功');
      }
    );
  };
  // 选择天
  onDayChange = value => {
    this.setState({
      day: value,
    });
  };
  // 选择时
  onHoursChange = value => {
    this.setState({
      hours: value,
    });
  };
  // 选择分
  onMinutesChange = value => {
    this.setState({
      minutes: value,
    });
  };
  // 校验商品图片
  validatorImg = (rule, value, callback) => {
    if (this.state.list.length == 0) {
      callback('最少需要添加一张商品图');
    }
    callback();
  };
  // 校验发货方式
  validatorDelivery = (rule, value, callback) => {
    if (
      (value <= -1 || value === '' || value === undefined || value == null) &&
      this.state.freightWay == 1
    ) {
      callback('请输入运费');
    }
    callback();
  };
  // 修改快递发货共用
  onStatusChange = e => {
    const {freightWay} = this.state;
    console.log(e.target);
    if (e.target.checked) {
      this.courierArr.push(e.target.value);
    } else {
      this.courierArr = this.courierArr.filter(item => item !== e.target.value);
      if(freightWay !=1){
        this.setState({
          freight: null,
        });
      } 
    }
    console.log(this.courierArr,78)
    this.setState({
      courier: this.courierArr.indexOf('1')>-1,
      delivery: this.courierArr,
      [e.target.name]: e.target.checked,
    },()=>{
      this.props.form.setFieldsValue({
        delivery:this.courierArr
      })
    });
  };

  // 商品留言类型切换
  selectChange = v => {
    this.setState({
      msgType: v,
    });
  };

  // 批量修改价格
  modifyPrice = () => {
    this.setState({
      bulkChanges: false,
      modifyPrice: true,
    });
  };
  // 批量修改库存
  modifyInventory = () => {
    this.setState({
      bulkChanges: false,
      modifyInventory: true,
    });
  };
  // 取消批量修改
  cancelBulkChanges = () => {
    this.setState({
      bulkChanges: true,
      modifyPrice: false,
      modifyInventory: false,
    });
  };
  // 修改价格输入框
  changeBulkPrice = value => {
    this.setState({
      allPrice: value,
    });
  };
  // 批量保存规格中的价格
  saveBulkChanges = () => {
    this.state.stock.length &&
      this.state.stock.map(item => {
        item.price = this.state.allPrice;
        let pid =
          item.v1_id +
          '-' +
          (item.v2_id == undefined ? 0 : item.v2_id) +
          '-' +
          (item.v3_id == undefined ? 0 : item.v3_id);
        this.props.form.setFieldsValue({
          ['price' + (() => pid)()]: this.state.allPrice,
        });
      });
    let newDataList = Object.assign(this.state.stock, { price: this.state.allPrice });
    this.setState(
      {
        stock: newDataList,
        bulkChanges: true,
        modifyPrice: false,
      },
      () => {
        this.sortSprice();
      }
    );
  };
  // 修改库存输入框
  changeBulkInventory = value => {
    this.setState({
      allStockNum: value,
    });
  };
  // 批量保存规格中的库存
  saveBulkInventoryChanges = () => {
    this.state.stock.length &&
      this.state.stock.map(item => {
        item.stock_num = this.state.allStockNum;
        let pid =
          item.v1_id +
          '-' +
          (item.v2_id == undefined ? 0 : item.v2_id) +
          '-' +
          (item.v3_id == undefined ? 0 : item.v3_id);
        this.props.form.setFieldsValue({
          ['stock_num' + (() => pid)()]: this.state.allStockNum,
        });
      });
    let newDataList = Object.assign(this.state.stock, { stock_num: this.state.allStockNum });
    this.setState(
      {
        stock: newDataList,
        bulkChanges: true,
        modifyInventory: false,
      },
      () => {
        this.sortStockNum();
      }
    );
  };
  // 新增分类
  addCategory = () => {
    window.open(`/#/${window.storeId}/goods/groups`);
  };
  // 新增标签
  addTags = () => {
    window.open(`/#/${window.storeId}/goods/tags`);
  };

  onError = e => {
    this.setState({
      videoImgShow: true,
    });
    e.target.src = 'http://img.weapi.io/placeholder/96x96/000/000';
  };

  // 验证留言
  checkMessage = (rule, value, callback) => {
    if (value) {
      for (let i = 0; i < value.length; i++) {
        if (!value[i].name.length) {
          callback('留言标题不能为空');
        }
      }
    }
    callback();
  };

  // 选择运费模板
  onFreightTemplateChange = e => {
    const { form } = this.props;
    this.setState({
      freightTemplateId: e,
    });
    form.setFieldsValue({
      freightTemplateId: e,
    });
  };

  // 校验运费模板
  validatorFreightTemplateId = (rule, value, callback) => {
    if (this.state.freightTemplateId == null && this.state.freightWay == 2) {
      callback('请选择运费模板');
    }
    callback();
  };

  render() {
    const {
      current,
      btnLoading,
      treeData,
      tagList,
      options,
      freightTemplate,
      videoImgShow,
    } = this.state;
    const { getFieldDecorator } = this.props.form;
    const { supportDelivery, freightTemplateList } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };

    const formItemLayout20 = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };

    const formItemLayout14 = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };

    const formItemLayout8 = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
    };

    const formItemLayout6 = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
    };

    const formItemLayout4 = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
    };

    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    };

    const tProps = {
      treeData,
      value: this.state.value,
      onChange: this.onChange,
      treeCheckable: true,
      // showCheckedStrategy: TreeSelect.SHOW_PARENT,
      searchPlaceholder: '请选择',
      //   treeDefaultExpandAll: true,
      allowClear: true,
      showSearch: false,
    };

    console.log(this.state.courier);
    return (
      <div className={styles.mainBox}>
        <Row gutter={16} className={styles.stepsBox}>
          <Col span={12} offset={6}>
            <Steps current={current}>
              <Steps.Step title="编辑基本信息" />
              <Steps.Step title="编辑商品详情" />
            </Steps>
          </Col>
        </Row>

        {
          <Form onSubmit={this.handleSubmit} className={styles.formBox}>
            {current === 0 && (
              <div className="steps-content">
                <Card title="基本信息" bordered={false} className={styles.contentBox}>
                  <Form.Item {...formItemLayout} label="商品名称">
                    {getFieldDecorator('name', {
                      initialValue: this.state.name,
                      rules: [
                        {
                          required: true,
                          message: '商品名称必须填写，最多60个字',
                          //whitespace: true
                        },
                        {
                          max: 60,
                          message: '商品名称必须填写，最多60个字',
                        },
                      ],
                    })(
                      <InputText
                        name="name"
                        onChange={this.onTextChange}
                        onBlur={this.checkName}
                        showtotal
                        maxLength={60}
                      />
                    )}
                  </Form.Item>

                  <Form.Item {...formItemLayout} label="分享描述" extra="微信分享给好友时会显示">
                    {getFieldDecorator('sharedesc', {
                      initialValue: this.state.sharedesc,
                      rules: [
                        {
                          max: 36,
                          message: '分享描述最多不能超过36个字',
                        },
                      ],
                    })(
                      <InputText
                        name="sharedesc"
                        onChange={this.onDescChange}
                        showtotal
                        maxLength={36}
                      />
                    )}
                  </Form.Item>

                  <Form.Item {...formItemLayout8} label="商品分类">
                    <TreeSelect {...tProps} />
                    <span style={{ width: 150, position: 'absolute', top: -10, marginLeft: 10 }}>
                      <a href="javascript:;" onClick={this.GetFirstAndSecondList}>
                        刷新
                      </a>
                      <Divider type="vertical" />
                      <a href="javascript:;" onClick={this.addCategory}>
                        新增分类
                      </a>
                    </span>
                  </Form.Item>

                  <Form.Item {...formItemLayout8} label="商品类目">
                    <Cascader
                      placeholder="请选择"
                      options={options}
                      loadData={this.loadData}
                      onChange={this.onCascaderChange}
                      changeOnSelect
                      value={[this.state.class_1, this.state.class_2]}
                    />
                  </Form.Item>

                  <Form.Item {...formItemLayout8} label="商品标签">
                    <Select
                      placeholder="请选择"
                      allowClear={true}
                      onChange={this.onTagChange}
                      value={this.state.tagId}
                    >
                      {tagList.length > 0 &&
                        tagList.map(item => (
                          <Select.Option key={item.id}>{item.name}</Select.Option>
                        ))}
                    </Select>
                    <span style={{ width: 150, position: 'absolute', top: -10, marginLeft: 10 }}>
                      <a href="javascript:;" onClick={this.GetTagList}>
                        刷新
                      </a>
                      <Divider type="vertical" />
                      <a href="javascript:;" onClick={this.addTags}>
                        新增标签
                      </a>
                    </span>
                  </Form.Item>

                  <Form.Item
                    {...formItemLayout}
                    label="商品卖点"
                    extra="在商品详情页标题下面展示卖点信息"
                  >
                    {getFieldDecorator('feature', {
                      //validateTrigger: 'onBlur',
                      initialValue: this.state.feature,
                      rules: [
                        {
                          max: 60,
                          message: '商品卖点最多不能超过60个字',
                        },
                      ],
                    })(
                      <InputText
                        name="feature"
                        onChange={this.onFeatureChange}
                        showtotal
                        maxLength={60}
                      />
                    )}
                  </Form.Item>

                  <Form.Item
                    {...formItemLayout14}
                    label="商品图片"
                    extra="建议尺寸800*800像素，你可以拖拽图片调整顺序，最多上传15张"
                    className={styles.coverBox}
                  >
                    {getFieldDecorator('list', {
                      rules: [
                        {
                          required: true,
                          message: '最少需要添加一张商品图',
                          validator: this.validatorImg,
                        },
                      ],
                    })(
                      <Sortable
                        className="demo-sortable"
                        items={this.state.list}
                        filterClass="demo-sortable-add"
                        dragClass="demo-sortable-drag"
                        onChange={this.handleSortableChange}
                      >
                        {this.state.list.map((item, index) => {
                          return (
                            <Fragment>
                              {item && item.Id ? (
                                <div
                                  className="demo-sortable-item"
                                  key={item.Id}
                                  style={{ display: 'inline-block' }}
                                >
                                  {item.imageUrl && (
                                    <div className={styles.uploadCover}>
                                      <img
                                        src={
                                          this.props.oemInfo &&
                                          this.props.oemInfo['cdnUrl'] + '/' + item.imageUrl
                                        }
                                        alt="avatar"
                                        width="100%"
                                        height="100%"
                                      />
                                      <Icon
                                        className={styles.closeVideo}
                                        type="close"
                                        onClick={() => this.handleRemove(index)}
                                      />
                                    </div>
                                  )}
                                </div>
                              ) : null}
                            </Fragment>
                          );
                        })}

                        {this.state.list.length < 15 && (
                          <div className="demo-sortable-add" onClick={this.handleAdd}>
                            <div className={styles.uploadCover}>
                              <Icon type="plus" />
                            </div>
                          </div>
                        )}
                      </Sortable>
                    )}
                  </Form.Item>

                  <Form.Item
                    {...formItemLayout}
                    label="主图视频"
                    extra={
                      videoImgShow ? (
                        <p className="xkd-font14">
                          <Icon type="info-circle-o" className="xkd-color-primary xkd-mr8" />
                          该视频转码、审核中，暂无视频封面图，转码审核通过后可正常显示和播放。
                        </p>
                      ) : (
                        ''
                      )
                    }
                    help="建议时长9~30秒，建议视频宽高比1：1"
                    className={styles.coverBox}
                  >
                    <div className={styles.uploadCover} onClick={this.OpenVideoModal}>
                      {this.state.videoUrl ? (
                        <div className={styles.videoBox}>
                          <img
                            src={
                              this.props.oemInfo &&
                              this.props.oemInfo['cdnUrl'] +
                                '/' +
                                this.state.videoUrl +
                                '?x-oss-process=style/240'
                            }
                            style={{ width: '100%', height: '100%' }}
                            onError={this.onError}
                          />
                          <Icon
                            type="close"
                            className={styles.closeVideo}
                            onClick={this.removeVideo}
                          />
                        </div>
                      ) : (
                        <Icon type="plus" />
                      )}
                    </div>
                  </Form.Item>
                </Card>

                <Card bordered={false} className={styles.contentBox}>
                  <Form.Item {...formItemLayout20} label="商品规格">
                    <SKU
                      onFetchGroup={this.fetchSKUTree}
                      onFetchSKU={this.fetchSKU}
                      onChange={this.getSKU}
                      value={this.state.skuListArr}
                    />
                  </Form.Item>

                  {this.state.columns.length > 0 && (
                    <Form.Item {...formItemLayout20} label="规格明细">
                      <Table
                        // components={components}
                        className={styles.tableStyle}
                        pagination={false}
                        bordered
                        dataSource={this.state.stock}
                        columns={this.state.columns}
                        rowClassName="editable-row"
                      />

                      <div className={styles.volumeSetBox}>
                        批量设置：
                        {this.state.bulkChanges && (
                          <span>
                            <a href="javascript:;" onClick={this.modifyPrice}>
                              价格
                            </a>
                            <a href="javascript:;" onClick={this.modifyInventory}>
                              库存
                            </a>
                          </span>
                        )}
                        {this.state.modifyPrice && (
                          <span style={{ marginLeft: 16 }}>
                            <InputNumber
                              min={0.01}
                              max={9999999}
                              placeholder={`输入价格`}
                              onChange={val => {
                                this.changeBulkPrice(val);
                              }}
                            />
                            <a href="javascript:;" onClick={this.saveBulkChanges}>
                              保存
                            </a>
                            <a href="javascript:;" onClick={this.cancelBulkChanges}>
                              取消
                            </a>
                          </span>
                        )}
                        {this.state.modifyInventory && (
                          <span style={{ marginLeft: 16 }}>
                            <InputNumber
                              min={0}
                              max={9999999}
                              placeholder={`输入库存`}
                              onChange={val => {
                                this.changeBulkInventory(val);
                              }}
                            />
                            <a href="javascript:;" onClick={this.saveBulkInventoryChanges}>
                              保存
                            </a>
                            <a href="javascript:;" onClick={this.cancelBulkChanges}>
                              取消
                            </a>
                          </span>
                        )}
                      </div>
                    </Form.Item>
                  )}

                  <Form.Item {...formItemLayout4} label="价格">
                    {getFieldDecorator('price', {
                      initialValue: this.state.price,
                      rules: [
                        {
                          required: true,
                          message: '请输入价格',
                        },
                        {
                          pattern: /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
                          message: '请输入正确的价格',
                        },
                      ],
                    })(
                      <InputPrices
                        min={0.01}
                        max={9999999}
                        onChange={this.onPriceChange}
                        style={{ width: '100%' }}
                        setValue={this.state.price}
                        disabled={
                          this.state.priceDisabled && this.state.stock.length ? true : false
                        }
                      />
                    )}
                  </Form.Item>

                  <Form.Item
                    {...formItemLayout4}
                    label="划线价"
                    extra={
                      <p className={styles.noWrap}>
                        商品没有优惠的情况下，划线价在商品详情会以划线形式显示。
                        <Popover
                          content={<img src={priceImg} />}
                          trigger="hover"
                          placement="bottom"
                          // visible={this.state.visible}
                          //onVisibleChange={this.handleVisibleChange}
                        >
                          <a href="javascript:;">示例</a>
                        </Popover>
                      </p>
                    }
                  >
                    {getFieldDecorator('origin_price', {
                      initialValue: this.state.origin_price,
                      rules: [
                        {
                          pattern: /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
                          message: '请输入正确的划线价',
                        },
                      ],
                    })(
                      <InputPrices
                        min={0}
                        max={9999999}
                        onChange={this.onOriginPrice}
                        style={{ width: '100%' }}
                        setValue={this.state.origin_price}
                      />
                    )}
                  </Form.Item>

                  <Form.Item {...formItemLayout4} label="库存">
                    {getFieldDecorator('total_stock', {
                      initialValue: this.state.total_stock,
                      rules: [
                        {
                          required: true,
                          message: '请输入库存',
                        },
                        {
                          pattern: /^[0-9]\d*$/,
                          message: '请输入正确的库存',
                        },
                      ],
                    })(
                      <InputNumber
                        min={0}
                        max={10000000}
                        onChange={this.onNumChange}
                        style={{ width: '100%' }}
                        disabled={
                          this.state.allStockNumDisabled && this.state.stock.length ? true : false
                        }
                      />
                    )}
                  </Form.Item>

                  <Form.Item {...formItemLayout8} label="库存扣减">
                    {getFieldDecorator('deductionType', {
                      initialValue: this.state.deductionType,
                    })(
                      <Radio.Group name="deductionType" onChange={this.handleChange}>
                        <Radio value={1}>下单减库存</Radio>
                        <Radio value={2}>支付减库存</Radio>
                      </Radio.Group>
                    )}
                  </Form.Item>

                  <Form.Item {...formItemLayout4} label="商品编码">
                    {getFieldDecorator('goods_no', {
                      initialValue: this.state.goods_no,
                    })(<Input name="goods_no" onChange={this.handleChange} />)}
                  </Form.Item>

                  {this.state.stock.length == 0 && (
                    <Form.Item {...formItemLayout4} label="成本价">
                      {getFieldDecorator('cost_price', {
                        initialValue: this.state.cost_price,
                        rules: [
                          {
                            pattern: /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
                            message: '请输入正确的成本价',
                          },
                        ],
                      })(
                        <InputPrices
                          min={0}
                          max={9999999}
                          onChange={this.costPrice}
                          style={{ width: '100%' }}
                          setValue={this.state.cost_price}
                        />
                      )}
                    </Form.Item>
                  )}

                  <Form.Item {...formItemLayout8} label="会员折扣">
                    <Checkbox
                      onChange={this.handleDiscountChange}
                      checked={this.state.join_member_discount}
                    >
                      参加会员折扣
                    </Checkbox>
                    &nbsp;&nbsp;
                    <a href="javascript:;">管理会员卡</a>
                  </Form.Item>
                </Card>

                <Card title="其他信息" bordered={false} className={styles.contentBox}>
                  <Form.Item {...formItemLayout20} label="发货方式" style={{ marginBottom: 14 }}>
                    {getFieldDecorator('delivery', {
                      initialValue: this.state.delivery,
                      rules: [
                        {
                          required: true,
                          message: '请选择发货方式',
                        },
                      ],
                    })(
                      <Checkbox.Group style={{ width: '100%' }}>
                        <Row style={{ marginTop: 10 }}>
                          <Col span={24} className={styles.mb16}>
                            <Checkbox
                              value="1"
                              name="courier"
                              onChange={this.onStatusChange}
                              disabled={!supportDelivery.IsSupportExpress}
                            >
                              <span>
                                <span>快递发货</span>{' '}
                                {!supportDelivery.IsSupportExpress ? (
                                  <a
                                    className="xkd-ml8"
                                    href={`#/${window.storeId}/delivery/express`}
                                    target="_blank"
                                  >
                                    去开启
                                  </a>
                                ) : null}
                              </span>
                            </Checkbox>
                            {this.state.courier ? (
                              <div>
                                <Form.Item
                                  {...formItemLayout4}
                                  label={
                                    <Radio
                                      className={styles.pdr0}
                                      name="freightWay"
                                      checked={this.state.freightWay == 1 ? true : false}
                                      onChange={this.handleChange}
                                      value={1}
                                    >
                                      统一运费
                                    </Radio>
                                  }
                                  className={styles.mb0}
                                >
                                  {getFieldDecorator('freight', {
                                    initialValue: this.state.freight,
                                    rules: [
                                      {
                                        pattern: /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
                                        message: '请输入正确的运费',
                                      },
                                      {
                                        validator: this.validatorDelivery,
                                      },
                                    ],
                                  })(
                                    <InputPrices
                                      min={0}
                                      max={9999999}
                                      onChange={this.onFreight}
                                      style={{ width: '100%' }}
                                      setValue={this.state.freight}
                                    />
                                  )}
                                </Form.Item>

                                <Form.Item
                                  {...formItemLayout6}
                                  label={
                                    <Radio
                                      className={styles.pdr0}
                                      name="freightWay"
                                      checked={this.state.freightWay == 2 ? true : false}
                                      onChange={this.handleChange}
                                      value={2}
                                    >
                                      运费模板
                                    </Radio>
                                  }
                                  extra={
                                    <p className={styles.noWrap}>
                                      运费模版支持按地区设置运费，按购买件数计算运费等
                                    </p>
                                  }
                                  className={styles.mb0}
                                >
                                  {/* <div>
                                        <Select
                                          placeholder="请选择运费模板"
                                          allowClear={true}
                                          onChange={this.onFreightTemplateChange}
                                        >
                                          {
                                            freightTemplateList.length > 0 &&
                                            freightTemplateList.map(item => <Select.Option key={item.Id}>{item.Name}</Select.Option>)
                                          }
                                        </Select>

                                        <span style={{ width: 150, position: 'absolute', top: 0, marginLeft: 10 }}>
                                          <a href="javascript:;">刷新</a>
                                          <Divider type="vertical" />
                                          <a href="javascript:;">新建运费模板</a>
                                        </span>
                                      </div> */}
                                  {getFieldDecorator('freightTemplateId', {
                                    initialValue: this.state.freightTemplateId,
                                    rules: [
                                      {
                                        validator: this.validatorFreightTemplateId,
                                      },
                                    ],
                                  })(
                                    <div>
                                      <Select
                                        placeholder="请选择运费模板"
                                        allowClear={true}
                                        onChange={this.onFreightTemplateChange}
                                        value={this.state.freightTemplateId}
                                      >
                                        {freightTemplateList.length > 0 &&
                                          freightTemplateList.map(item => (
                                            <Select.Option key={item.Id}>{item.Name}</Select.Option>
                                          ))}
                                      </Select>

                                      <span
                                        style={{
                                          width: 150,
                                          position: 'absolute',
                                          top: 0,
                                          marginLeft: 10,
                                        }}
                                      >
                                        <a href="javascript:;">刷新</a>
                                        <Divider type="vertical" />
                                        <a href="javascript:;">新建运费模板</a>
                                      </span>
                                    </div>
                                  )}
                                </Form.Item>
                              </div>
                            ) : null}
                          </Col>
                          <Col span={24} className={styles.mb16}>
                            <Checkbox
                              value="2"
                              name="distribution"
                              disabled={!supportDelivery.IsSupportSameCity}
                              onChange={this.onStatusChange}
                            >
                              <span>同城配送</span>
                            </Checkbox>
                          </Col>
                          <Col span={24} style={{ marginBottom: 0 }}>
                            <Checkbox
                              value="3"
                              name="sinceTheLift"
                              onChange={this.onStatusChange}
                              disabled={!supportDelivery.IsSupportFromDoor}
                            >
                              <span>上门自提</span>
                            </Checkbox>
                          </Col>
                        </Row>
                      </Checkbox.Group>
                    )}
                  </Form.Item>
                  {this.state.distribution || this.state.sinceTheLift ? (
                    <Form.Item
                      {...formItemLayout20}
                      label="备货时间"
                      extra="当开启了同城送定时达，可选送达时间会预留备货时间，如定时达设置需提前1小时，商品备货时间2小时，则买家需提前3小时下单。当开启了到店自提，买家下单后，卖家也需要预留备货时间。"
                    >
                      <div className={styles.help}>
                        <Switch
                          size="small"
                          onChange={this.switchChange}
                          checked={this.state.isSwitch}
                        />
                        &nbsp;&nbsp;需要预留配送时间
                        {this.state.isSwitch ? (
                          <div style={{ display: 'inline-block' }}>
                            <span className={styles.pdr8}>:</span>
                            <Select
                              style={{ width: 112 }}
                              placeholder="请选择"
                              allowClear
                              value={this.state.day}
                              onChange={this.onDayChange}
                            >
                              {day}
                            </Select>
                            <span className={styles.pd08}>天</span>
                            <Select
                              style={{ width: 112 }}
                              placeholder="请选择"
                              allowClear
                              value={this.state.hours}
                              onChange={this.onHoursChange}
                            >
                              {hours}
                            </Select>
                            <span className={styles.pd08}>小时</span>
                            <Select
                              style={{ width: 112 }}
                              placeholder="请选择"
                              allowClear
                              value={this.state.minutes}
                              onChange={this.onMinutesChange}
                            >
                              {minutes}
                            </Select>
                            <span className={styles.pd08}>分钟</span>
                          </div>
                        ) : null}
                      </div>
                    </Form.Item>
                  ) : null}

                  <Form.Item {...formItemLayout20} label="上架时间">
                    {getFieldDecorator('shelfTime', {
                      initialValue: this.state.shelfTime,
                    })(
                      <Radio.Group name="shelfTime" onChange={this.handleChange}>
                        <Radio style={radioStyle} value={1}>
                          立即上架售卖
                        </Radio>
                        <Radio style={radioStyle} value={2}>
                          暂不售卖，放入仓库
                        </Radio>
                      </Radio.Group>
                    )}
                  </Form.Item>

                  <Form.Item
                    {...formItemLayout20}
                    label="留言"
                    extra={
                      <p className={styles.noWrap}>
                        购买商品时让买家输入留言，最多可设置 10 条留言
                      </p>
                    }
                  >
                    {getFieldDecorator('message', {
                      rules: [
                        {
                          validator: this.checkMessage,
                        },
                      ],
                    })(
                      <AddMessage
                        formItem={this.state.formItem}
                        onRef={ref => (this.addMsg = ref)}
                        _this={this}
                      />
                    )}
                  </Form.Item>
                </Card>

                <div className="xkd-bottom-actions">
                  <Button className="xkd-mr16" htmlType="submit" loading={btnLoading}>
                    保存
                  </Button>
                  <Button type="primary" onClick={() => this.next()}>
                    下一步
                  </Button>
                </div>
              </div>
            )}
          </Form>
        }
        {current === 1 && (
          <div>
            <div className={styles.goodsDetailBox}>
              <AddDetail _this={this} onRef={ref => (this.addDetail = ref)} />
            </div>
            <div className="xkd-bottom-actions">
              <Button onClick={() => this.prev()} className="xkd-mr16">
                上一步
              </Button>

              <Button
                type="primary"
                className="xkd-mr16"
                onClick={this.handleSubmit}
                loading={btnLoading}
              >
                保存
              </Button>
            </div>
          </div>
        )}

        <SelectedImage
          onRef={this.imgModal}
          selectImage={this.onImageChange}
          checkNum={15 - this.state.list.length}
          multiple={true}
          limit={15}
          allUrl={false}
        />

        {this.state.isLoading && (
          <Videoplugin
            onRef={this.videoModal}
            onIsLoading={this.onChangeLoading}
            selectvideo={this.onVideoChange}
          />
        )}
      </div>
    );
  }
}

export default Form.create()(ReleaseGoods);
